<template>
  <div class="storage" id="storage">
    <div class="storageTitle">
      <span>{{$t('存储空间')}}</span>
    </div>
    <div class="storageContent" id="storage">
      <div v-for="item in storageList" :key="item.name" class="storageProgress">
        <!-- <span class="storagePercentage" :style="{ color: colorChange((item.usage / item.total) * 100) }">{{ ((item.usage
            / item.total) * 100).toFixed(2)
        }}%</span> -->
        <span class="storagePercentage" style="float: left;">
          {{$t('已用')}} <span :style="{color: colorChange(Number(item.usage_ratio)),marginRight: '8px' }">
            {{ item.usage_ratio }}%

          </span> {{$t('可用')}} {{ item.unused }}</span>
        <span class="storageName">{{ item.name }} {{item.total_size}}</span>
        <el-progress :percentage="Number(item.usage_ratio)" :color="customColors" :format="format" :text-inside="true"></el-progress>
      </div>
    </div>
  </div>
</template>

<script>
import { getStorage } from '@/api/home'
import { Loading } from 'element-ui'
export default {
  name: 'Info',
  data () {
    return {
      storageList: [],
      loadingInstance: null,
      customColors: [
        { color: '#fd666d', percentage: 100 },
        { color: '#fac858', percentage: 70 },
        { color: '#009966', percentage: 30 }
      ],
      freeUnit: { // 用于计算空间时的单位升级
        'B': 'KB',
        'KB': 'MB',
        'MB': 'G',
        'G': 'T'
      }
    }
  },
  mounted () {
    this.listData()
    this.timer = setInterval(() => {
      getStorage().then(res => {
        if (res.status === 0) {
          this.storageList = res.info
        }
      }).catch(e => {
        clearInterval(this.timer)
      })
    }, 300000)
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    init (flag) {
      this.listData()
    },
    listData () {
      if (document.getElementById('storage')) {
        this.loadingInstance = Loading.service({
          target: '#storage',
          lock: true,
          text: this.$t('加载'),
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.4)'
        })
      }
      getStorage().then(res => {
        if (res.status === 0) {
          this.storageList = res.info
          if (this.loadingInstance) {
            this.loadingInstance.close()
            this.loadingInstance = null
          }
        }
      }).catch(e => {
        if (this.loadingInstance) {
          this.loadingInstance.close()
          this.loadingInstance = null
        }
      })
    },
    format () {
      // 让进度条默认显示的数值为空
    },
    colorChange (num) {
      let color = ''
      for (let item of this.customColors) {
        if (num <= item.percentage) {
          color = item.color
        } else {
          break
        }
      }
      return color
    },
    // 计算剩余可用空间
    freeSpaceFilters (free, unit) {
      if (free >= 1024) {
        return this.freeSpaceFilters(free / 1024, this.freeUnit[unit])
      } else {
        return free.toFixed(2) + unit
      }
    }
  }
}
</script>
<style lang="less">
.storageTitle {
  border-bottom: 1px solid #dcdfe6;
  padding: 10px 20px;
  color: #303133;
}

.storageContent {
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.storagePercentage {
  font-size: 14px;
  margin-top: 10px;
  float: left;
  color: #666;
}

.storageProgress {
  width: 100%;
  margin: 10px 0;
}
.storageProgress:first-child {
  width: 100%;
  margin-top: 0;
}

.storageName {
  margin-top: 10px;
  float: right;
  color: #666;
}
</style>
